<template>
	<view class="gifts-cell" @contextmenu="handleRightClick">
		<view class="time">
			{{formatTime(info.create_time)}}
		</view>
		<view class="name">
			{{info.sender_name}} 赠送
		</view>
		<view class="gift">
			<image class="gift-icon" :src="info.gift_icon" mode=""></image>
			<view class="gift-name">
				{{info.gift_name}}
			</view>
		</view>
		<view class="bind-user" v-if="info.receiver_id > 0">
			<image class="bind-u-header" :src="info.receiver_header" mode=""></image>
			<view class="bind-uname">
				{{info.receiver_nick_name}}
			</view>
		</view>
		<view class="mon">
			{{info.gift_coins}}票
		</view>
	</view>
</template>

<script>
	export default {
		name:"gifts-cell",
		props: {
			
			// g.id,
			// g.user_id,
			// g.gift_source_id,
			// g.gift_icon,
			// g.gift_name,
			// g.gift_coins,
			// g.create_time,
			// u.id AS rev_user_id,
			// u.name,
			// u.header,
			// u.nick_name
			
			info: {
				type: Object,
				default: null
			},
		},
		data() {
			return {
				
			};
		},
		methods: {
			 handleRightClick(e) {
				e.preventDefault() // 阻止默认右键菜单
				uni.createSelectorQuery().in(this)
				    .select('.gifts-cell')
				    .boundingClientRect(rect => {
				      if (rect) {
				        // 可以使用这些坐标做其他操作
						const x = rect.left + window.screenX;
						const y = rect.bottom + window.screenY;
						// 重新分配礼物
						window.electronAPI.showGiftResendTo(this.info.id, this.info.receiver_id, x, y)
				
						// window.electronAPI.showBindTo(this.info.fan_user_id, this.info.bind_anchor_id, x, y)
				      }
				    })
				    .exec();
			},
			
			// 跨平台获取事件位置
			getEventPosition(e) {
			  // H5鼠标事件
			  if (e.clientX !== undefined) {
			    return { clientX: e.clientX, clientY: e.clientY };
			  }
			  // 小程序触摸事件
			  if (e.touches && e.touches[0]) {
			    return e.touches[0];
			  }
			  // 其他情况
			  return { clientX: 0, clientY: 0 };
			},
			
			formatTime(timestamp) {
				 // 1. 将秒级时间戳转为毫秒（因为JS的Date需要毫秒）
				const date = new Date(timestamp * 1000);
			
				// 2. 获取时、分、秒，并补零
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');
			
				// 3. 组合成 HH:MM:SS 格式
				return `${hours}:${minutes}:${seconds}`;
			}
		}
	}
</script>

<style scoped>
	
	.gifts-cell {
		display: flex;
		align-items: center;
		font-size: 12px;
		padding: 4px 5px;
		color: wheat;
		height: 20px;
	}
	
	.gifts-cell:hover {
		cursor: pointer;
		background-color: #363643;
	}
	
	.time {
		font-size: 12px;
	
	}
	
	.name {
		margin-left: 5px;
		max-width: 100px;
		overflow: hidden;      /* 超出部分隐藏 */
		white-space: nowrap;   /* 禁止换行 */
		text-overflow: ellipsis; /* 超出部分显示... */
	}
	
	.bind-user {
		margin-left: 5px;
		display: flex;
		align-items: center;
		height: 20px;
		border-radius: 10px;
		background-color: #283353;
		padding-left: 2px;
		padding-right: 8px;
		margin-right: 5px;
	}
	
	.bind-u-header {
		width: 16px;
		height: 16px;
		border-radius: 8px;
	}
	
	.bind-uname {
		margin-left: 3px;
		max-width: 80px;
		overflow: hidden;      /* 超出部分隐藏 */
		white-space: nowrap;   /* 禁止换行 */
		text-overflow: ellipsis; /* 超出部分显示... */
	}
	
	.gift {
		display: flex;
		align-items: center;
	}
	
	.gift-icon {
		width: 20px;
		height: 20px;
	}

</style>